<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="fruit"></div>
    <script type="text/javascript">
        // 自定义属性
        var arr = [{
            id: 1,
            fname: 'apple'
        }, {
            id: 2,
            fname: 'eggplant'
        }, {
            id: 3,
            fname: 'lemon'
        }]
        var a = '<ul>'
        arr.forEach(function(item, index) {
            a += '<li data-abc="hello" data-fid = "' + item.id + '">' + item.fname + '</li>'
        })
        a += '</ul>'
        var fruit = document.querySelector('#fruit');
        fruit.innerHTML = a
            // e.target表示事件源
            // 所有的自定义属性都以data-开始
            // dataset表示元素所有的自定义属性,dataset是原生js的API
        var ul = document.querySelector('ul')
        ul.onclick = function(e) {
                console.log(e.target.dataset.abc)
                console.log(e.target.dataset.fid)
            }
            // jQuery获取自定义属性值用法
            // $(this).data('fid')
    </script>
</body>

</html>